<script setup lang="ts">
import { ref, onMounted } from 'vue';
import bgImage from '@/assets/img/lotteryBg.jpg'; // 导入图片

// 奖品数据
const prizes = [
  { id: 1, name: '优酷视频', description: '会员周卡', tips:'', angle: 240 ,className: 'prize1'},
  { id: 2, name: '曹操专车', description: '9折优惠券',tips:'(最高优惠2元)', angle: 300 ,className: 'prize2'},
  { id: 3, name: '爱奇艺', description: '会员周卡', tips:'', angle: 0 ,className: 'prize1'},
  { id: 4, name: '曹操专车', description: '满50-2优惠券', tips:'', angle: 60 ,className: 'prize2'},
  { id: 5, name: '腾讯视频', description: '会员周卡', tips:'', angle: 120 ,className: 'prize1'},
  { id: 6, name: '曹操专车', description: '满100-10优惠券', tips:'', angle: 180 ,className: 'prize2'},
];

// 转盘状态
const isSpinning = ref(false);
const currentPrize = ref<number | null>(null);
const rotationClass = ref(''); // 使用类名控制动画
const remainingChances = ref(10);// 抽奖次数

// 抽奖函数
const startLottery = () => {
  if (isSpinning.value || remainingChances.value <= 0) {
    return;
  }

  isSpinning.value = true;
  remainingChances.value--;

  // 随机选择一个奖品
  const randomPrizeIndex = Math.floor(Math.random() * prizes.length);
  currentPrize.value = prizes[randomPrizeIndex].id;

  // 计算旋转角度 (基础10圈 + 随机额外圈数 + 目标奖品角度 - 30度偏移量)
  const extraRounds = Math.floor(Math.random() * 5) + 5; // 额外5-9圈
  const angleOffset = 30; // 角度偏移量，用于校准指针位置
  const totalRotation = 360 * extraRounds + prizes[randomPrizeIndex].angle - angleOffset;

  // 动态创建CSS关键帧动画
  const style = document.createElement('style');
  style.textContent = `
    @keyframes spin-${Date.now()} {
      from { transform: rotate(0deg); }
      to { transform: rotate(${totalRotation}deg); }
    }
    .spin-animation-${Date.now()} {
      animation: spin-${Date.now()} 5s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
    }
  `;
  document.head.appendChild(style);

  // 应用动画类
  rotationClass.value = `spin-animation-${Date.now()}`;

  // 动画结束后清理
  setTimeout(() => {
    isSpinning.value = false;
    rotationClass.value = '';
    document.head.removeChild(style);
    // 添加调试信息
    console.log('旋转角度:', totalRotation);
    console.log('目标奖品角度:', prizes[randomPrizeIndex].angle);
    console.log('选中的奖品:', prizes[randomPrizeIndex].name, prizes[randomPrizeIndex].description);
    alert(`恭喜您获得${prizes[randomPrizeIndex].name} ${prizes[randomPrizeIndex].description}`);
  }, 5000); // 5秒后显示结果
};

// 初始化转盘
onMounted(() => {
  // 直接使用导入的图片URL
  const bgElement = document.querySelector('.bg-image');
  if (bgElement) {
    bgElement.style.backgroundImage = `url(${bgImage})`;
  }
});
</script>

<template>
  <div class="container">
    <!-- 背景图 -->
    <div class="bg-image">

          <!-- 转盘容器 -->
          <div class="lottery-container">
              <!-- 转盘背景图 -->
              <div class="lottery-bg">
                  <!-- 可转动的奖品区域 -->
                  <div class="lottery-prizes" :class="rotationClass">
                    <!-- 奖品名称 -->
                    <div class="prize-names">
                      <div v-for="prize in prizes" :key="prize.id" class="prize-item" :style="{ transform: `rotate(${prize.angle}deg)` }">
                        <div class="prize-text">
                          <span class="prize-desc">({{ prize.description }})</span>
                          <span :class="{ [prize.className]: true }">{{ prize.name }}</span>
                          <span class="prize-tips">{{ prize.tips }}</span>

                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 转盘指针 -->
                  <div class="lottery-pointer">
                    <img src="@/assets/img/lottery-03.png" alt="转盘指针">
                  </div>
              </div>
              <!-- 抽奖按钮 -->
              <div class="lottery-btn" @click="startLottery" :class="{ disabled: isSpinning || remainingChances <= 0 }">
                <div class="btn-text">GO</div>
              </div>
              <!-- 剩余抽奖次数 -->
              <div class="remaining-chances">
                还剩余 {{ remainingChances }} 次抽奖机会
              </div>
          </div>


    </div>


  </div>
</template>

<style scoped>
/* 引入公共字体样式 */
@import url('@/assets/styles/fonts.css');
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保html和body充满整个屏幕 */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* 基础样式 */
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0;
}

/* 背景图 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 14.12rem;
  background-size: 100% 100%;
  background-position: center;
  z-index: 0;
  background-image: url('@/assets/img/lotteryBg.jpg'); /* 直接在样式中设置 */
}

/* 转盘容器 */
.lottery-container {
  position: relative;
  width: 100%;
  max-width: 7.5rem;
  height: 100%;
  max-height: 14.12rem;
  z-index: 1;
}

/* 转盘背景 */
.lottery-bg {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.75rem;
  height: 7.36rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/img/lottery-01.png') no-repeat;
  background-size: 100% 100%;
}

.lottery-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 奖品区域 */
.lottery-prizes {
  position: absolute;
  top: 6.5%;
  left: 8.5%;
  width: 4.7rem;
  height: 4.7rem;
  transform-origin: center center;
  will-change: transform;
  background: url('@/assets/img/lottery-02.png') no-repeat;
  background-size: 100% 100%;
}

.lottery-prizes img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 奖品名称样式 */
.prize-names {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.prize-item {
  position: absolute;
  top: 0;
  left: 38%;
  width: 1.8rem;
  height: 1.8rem;
  transform-origin: bottom center;
  display: flex;
  justify-content: center;
  top: 12%;
  left: 32%;
  /* padding-top: 15%; */
}

.prize-text {
  font-family: 'HYCuYuanJ', sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  /* transform: rotate(90deg); */
}

.prize-desc {
  font-size: .2rem;
  font-weight: normal;
  font-family: "HYQiHei-55J";
  color: rgb(51, 51, 51);
  text-align: center;
  display: block;

}

.prize-name {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 20px;
  margin-top: -10px;
  margin-left: -25%;
  text-align: center;
  transform-origin: 100% 50%;
}

.prize-text {
  display: inline-block;
  font-family: 'HYCuYuanJ', sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.2;
}

/* 转盘指针 */
.lottery-pointer {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.3rem;
  height: 1.7rem;
  z-index: 2;
}

.lottery-pointer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 抽奖按钮 */
.lottery-btn {
  position: absolute;
  bottom: 14%;
  left: 69.5%;
  transform: translateX(-50%);
  width: .9rem;
  height: .9rem;
  z-index: 3;
  cursor: pointer;
  background-color: transparent;
}

.btn-text {
  font-family: 'HYDiShengYingXiongTiJ', sans-serif;
  font-size: 0;
  color: #fff;
  text-shadow: 0 0 5px #000;
}

.lottery-btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 剩余抽奖次数 */
.remaining-chances {
  font-family: 'HYHeiQiTiJ', sans-serif;
  font-size: .24rem;
  color: #fff;
  text-shadow: 0 0 5px #bb3407;
  z-index: 1;
  position: absolute;
  top: 82.5%;
  left: 26%;
}
.prize1{
  font-size: .26rem;
  font-family: "HYQiHei-90J",sans-serif;
  color: rgb(255, 168, 0);
  text-align: center;
  display: block;
}

.prize2{
  font-size: .26rem;
  font-family: 'HYQiHei-90J', sans-serif;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 5px #fca207;
  display: block;

}
.prize-tips{
  font-size: .16rem;
  font-family: "HYQiHei-55j",sans-serif;
  color: rgb(251, 129, 0);
  text-align: center;
  display: block;
}
</style>
